<template>
  <div
    class="card-layout"
    :style="{'margin-top':minHeight,'margin-bottom':marginBottom}"
  >
    <div class="card" v-for="(item,index) in card" :key="index">
      <div class="triangle" @click="insertNoFeel(item)">
        <van-icon name="cross" />
      </div>
      <div class="performanceInfo-layout" @click="goDetail(item.userUid)">
        <div class="info">
          <div class="user">
            <div class="userInfo">
              <div class="header">
                <!-- <img :src="item.pictureUrl" /> -->
                <img v-lazy="item.pictureUrl" alt />
              </div>
            </div>
            <div class="userName">
              <p>{{item.userName}}</p>
              <!-- 表现师评分 -->
              <div v-if="item.fficiencyScore != 0">
                <van-rate
                  v-model="item.fficiencyScore"
                  :allow-half="true"
                  :readonly="true"
                  void-color="#E5E5E5"
                  void-icon="star"
                  :size="14"
                />
              </div>
              <div v-else>
                <p class="workyears">{{item.workYears}}年工作经验</p>
              </div>
            </div>
          </div>
          <div class="price-info">
            <p class="lingThrough">原¥{{item.ordersSetting.originalPrice}}/张</p>
            <div>
              <span class="limitTime">{{item.ordersSetting.ltTime}}小时内</span>
              <span class="simple">¥</span>
              <span class="num fz4">{{item.ordersSetting.ltTimePrice}}</span>
              <span class="unit">/张</span>
            </div>
            <p>超时¥{{item.ordersSetting.gtTimePrice}}/小时</p>
          </div>
        </div>
      </div>
      <div class="photo">
        <!-- <div v-for="(item,index) in item.shortImages" :key="index">
          <img :src="item.shortImgUrl" :id="index" @click="handleImg(item.shortImages,index)">
          <van-image :src="item.shortImgUrl">
            <template v-slot:loading>
              <van-loading type="spinner" size="20"/>
            </template>
          </van-image>
        </div>-->
        <img
          v-for="(imgs,index) in item.shortImages"
          :key="index"
          v-lazy="imgs.shortImgUrl"
          :id="index"
          @click="handleImg(item.shortImages,index)"
        />
      </div>
      <div class="bookTime" @click="goDetail(item.userUid,'0')">
        <!-- 显示可预约与不可预约日期 -->

        <div class="timeGroup">
          <span>档期&ensp;&ensp;</span>
          <div v-for="(dateBook,index) in item.serviceDateInfos" :key="index">
            <div
              class="time"
              :class="{booked:!dateBook.isReservation && !dateBook.todayStopOrder}"
              v-if="index < 5"
            >
              <p v-if="index < 3">{{index | getDateType}}</p>
              <p v-else>{{dateBook.preordainDate | getDay}}</p>
            </div>
          </div>
        </div>
        <div class="bookBtn">
          <p>去预约</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken, getuserUid, getPassword } from "@/utils/auth.js";
import { ImagePreview } from "vant";
export default {
  name: "designerCard",
  props: ["cardList", "minHeight", "marginBottom", "clickToLogin", "showMsg"],
  data() {
    return {
      dateList: [],
      card: [],
      servieceDate: [],
      status: "",
      imgGroup: [],
      show: false,
      isTouristLogin: "",
      showInfo: true
    };
  },
  filters: {
    //使前三天的显示方式变成今、明、后
    getDateType(val) {
      switch (val) {
        case 0:
          return "今";
          break;
        case 1:
          return "明";
          break;
        case 2:
          return "后";
          break;
        default:
          break;
      }
    },
    //截取具体天数
    getDay(val) {
      return val.substring(8, 10);
    }
  },
  watch: {
    cardList(newVal) {
      this.card = newVal;
    },
    clickToLogin(val) {
      this.isTouristLogin = val;
    },
    showMsg(val) {
      this.showInfo = val;
    }
  },
  methods: {
    goToLogin() {
      this.$router.push("/login");
    },
    goDetail(BUserId, val) {
      let p = ``;
      if (this.clickToLogin === "1") {
        this.goToLogin();
      } else {
        if (val) {
          p = `/performance/personal_details?buserid=${BUserId}&&isAlert=val`;
        } else {
          p = `/performance/personal_details?buserid=${BUserId}`;
        }
        this.$router.push(p);
      }
    },
    insertNoFeel(item) {
      // try {
      //   const e = await HTTP(
      //     "app/attentionOrBlacklist/insertAttentionOrBlacklist",
      //     {
      //       type: 3,
      //       attentionUserUid: item.userUid,
      //       createBy: getuserUid()
      //     }
      //   );
      //   if (e.code === 200) {
      //     this.$toast(e.msg);
      //     this.status = true;
      //     this.$emit("getUserInfo", this.status);
      //   } else {
      //     this.$toast(e.msg);
      //   }
      // } catch (error) {
      //   this.$toast("数据开小差了");
      // }
      this.$emit("insertBlackList", item);
    },
    emitItem(item, e) {
      // let startPosition;
      // if (e && e.path[0].id) {
      //   startPosition = e.path[0].id;
      // }
      // this.$emit("preview", { item, startPosition });
      ImagePreview({
        images: imgs.map(e => e.shortImgUrl),
        startPosition: index,
        onClose: () => {},
        lazyLoad: true
      });
    },
    handleImg(item, index) {
      ImagePreview({
        images: item.map(e => e.shortImgUrl),
        startPosition: index,
        onClose: () => {},
        lazyLoad: true
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.card-layout {
  // margin-top: 2.7rem;
  //  min-height: 100vh;
  .card {
    margin: 0.16rem 0.24rem;
    border-radius: 0.1rem;
    background: #ffffff;
    box-shadow: 0px 2px 8px 4px rgba(216, 216, 216, 0.5);
    //z-index: 1;
    .triangle {
      width: 0;
      height: 0;
      border: 0.37rem solid #f5f5f5;
      border-right: 0.37rem solid transparent;
      border-bottom: 0.37rem solid transparent;
      border-top-left-radius: 0.3em;
      position: absolute;
      .van-icon {
        position: absolute;
        margin-top: -0.25rem;
        margin-left: -0.25rem;
        font-size: 0.18rem;
        font-weight: bold;
        color: #aaaaaa;
      }
    }
    .performanceInfo-layout {
      padding: 0.4rem 0.24rem;
      .info {
        display: flex;
        justify-content: space-between;
        .user {
          display: flex;
          .userInfo {
            .header {
              width: 1.36rem;
              height: 1.36rem;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 0.68rem;
              img {
                width: 1.28rem;
                height: 1.28rem;
                border-radius: 50%;
                object-fit: cover;
              }
            }
          }
          .userName {
            width: 2rem;
            margin-left: 0.2rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 0.32rem 0;
            p {
              font-size: 0.32rem;
              font-weight: 600;
              color: #282828;
              word-wrap: normal;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
            .van-rate {
              .van-rate__item {
                i {
                  font-size: 0.2rem !important;
                  margin-top: 0.1rem;
                }
              }
            }
            .workyears {
              font-size: 0.26rem;
              font-weight: 400;
              color: #656565;
            }
          }
        }
        .price-info {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-end;
          .lingThrough {
            text-decoration: line-through;
          }
          p {
            font-size: 0.24rem;
            color: #959595;
            font-weight: 400;
          }
          .limitTime {
            color: #ffffff;
            font-size: 0.2rem;
            background: #5e8efe;
            padding: 0.03rem;
            border-radius: 0.04rem;
          }
          .simple {
            color: #5e8efe;
            font-size: 0.24rem;
            margin: 0 0.09rem;
          }
          .num {
            // font-size: 0.36rem;
            color: #5e8efe;
          }
          .unit {
            font-size: 0.24rem;
            color: #959595;
          }
        }
      }
    }
    .photo {
      padding: 0 0.24rem;
      display: flex;
      height: 1.56rem;
      img {
        width: 1.56rem;
        height: 1.56rem;
        margin-right: 0.1rem;
        &:last-child {
          margin-right: 0;
        }
      }
      > div {
        margin-right: 0.1rem;
        &:last-child {
          margin-right: 0;
        }
        img {
          width: 1.56rem;
          height: 1.56rem;
        }
      }
    }
    .bookTime {
      padding: 0.3rem 0.24rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .timeGroup {
        display: flex;
        align-items: center;

        .time {
          width: 0.56rem;
          height: 0.56rem;
          border-radius: 0.28rem;
          border: 1.3px solid #dddddd;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #ffffff;
          font-size: 0.24rem;
          font-weight: 400;
          margin-right: 0.1rem;
          background: #f5f5f5;
          color: #cccccc;
        }
        .booked {
          background: #ffffff;
          color: #282828;
        }
      }
      .bookBtn {
        width: 1.8rem;
        height: 0.88rem;
        border-radius: 0.1rem;
        background: #5e8efe;
        color: #ffffff;
        font-size: 0.28rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>

<style lang="scss">
.van-image-preview {
  min-height: 100vh;
  .van-swipe {
    .van-swipe-item {
      height: 100vh !important;
    }
  }
}
</style>

